/* eslint-disable eqeqeq */
import { AddReply } from '@/components/DragModal/formdoms';
import { doFetch, getFetch } from '@/utils/doFetch';
import { LoadingOutlined, SendOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Drawer, message, Select, Spin, Tag, theme } from 'antd';
import { useRef, useState } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import Content from './Content';
import ReplyCard from './ReplyCard';
import filterByPinyin from '@/utils/filterByPinyin';
import './index.less';
import { Input } from 'antd';

function Reply(props) {
  //当前用户
  const {
    initialState: { currentUser, drawerAll, refreshlist, curitem },
    setInitialState,
  } = useModel('@@initialState');

  //任务的id
  const { item } = drawerAll ?? {};
  const scrollRef = useRef();

  const { data, refresh, ...other } = useRequest(
    async () => {
      let res = {};
      if (!drawerAll?.open || !item?.id) return;
      res = await getFetch({ url: '/item/' + item?.id });
      return res?.data?.data ?? {};
    },
    {
      refreshDeps: [item?.id],
    },
  );
  // 项目id
  let projectId = data ? data?.projectId : null;

  // 回复人员信息
  const [doreply, setdoreply] = useState(false);

  // 设置
  const setDrawer = (val) => {
    setInitialState((s) => ({
      ...s,
      drawerAll: {
        ...s.drawerAll,
        ...val,
      },
    }));
  };

  //主题
  const { token } = theme.useToken();
  const { colorText, colorBgSecondary, colorPrimary, colorBgThird, colorBgFourth } = token;

  const formRef = useRef();

  const [atUserIdList, setatUserIdList] = useState([]);

  //所有回复消息
  const allmsg = useRequest(
    async () => {
      if (!drawerAll?.open || !item?.id) return;
      let res = await getFetch({ url: '/itemMsg', params: { itemId: item?.id } });
      return res?.data?.dataList;
    },
    {
      refreshDeps: [item?.id],
    },
  );

  //人员
  const userList = useRequest(
    async () => {
      if (!projectId) return [];
      let res = await getFetch({ url: '/user', params: { projectId: projectId } });
      return res?.data?.dataList?.map((it) => ({
        label: it.name,
        value: it.id,
      }));
    },
    {
      refreshDeps: [projectId],
    },
  );

  //回复操作
  const { run, loading } = useRequest(
    (params) => {
      return doFetch(params);
    },
    {
      manual: true,
      debounceWait: 600,
      onSuccess: (res) => {
        allmsg?.refresh?.();
        if (res?.code === 0) {
          formRef.current.setFieldsValue({ reply: '' });
          setdoreply(false);
          setatUserIdList([]);
        }
      },
    },
  );


  const deleteitem = async () => {
    let res = await doFetch({
      url: `/item/${data?.id}`,
      params: {},
      method: 'DELETE',
    });
    await refreshlist?.();
    if (res.code === 0) {
      setDrawer({
        open: false,
      });
    }
  };


  // 更新信息
  const update = useRequest(async (params) => {
    let res = await doFetch({ url: '/item/' + item?.id, params, method: 'PUT' });
    return res
  }, {
    manual: true,
    debounceWait: 600,
    onSuccess: (res) => {
      if (res?.code === 0) {
        refreshlist?.();
      }
    },
  })

  return (
    <Drawer
      styles={{
        wrapper: {
          maxWidth: 1200
        }
      }}
      placement="right"
      width={'100%'}
      destroyOnClose
      onClose={() => {
        setDrawer({ open: false });
        setdoreply(false);
        setatUserIdList([]);
        setInitialState(s => ({
          ...s,
          drawerAll: {}
        }))
      }}
      title={
        <div className='spread gap12'>
          <span style={{ fontSize: 14, color: '#999999' }}>
            {data?.missionNo}
          </span>
          <b style={{flex:1}}>{item?.missionName ?? data?.missionName}</b>
          <Tag color={item?.itemType === 1 ?token.colorOppsite:token.colorPrimary} style={{padding:"5px 8px",margin:0}}>
           {item?.itemType === 1 ?"标准节点":"审批节点"}
          </Tag>
        </div>
      }
      {...drawerAll}
    >
      <div
        onClick={() => {
          setdoreply(false);
        }}
        style={{ height: '100%', overflow: 'hidden' }}
      >
        <Scrollbars ref={scrollRef} thumbMinSize={10} autoHide hideTracksWhenNotNeeded>
          <div style={{ padding: 18, paddingBottom: 0 }}>
            <Spin spinning={other?.loading}>
              <Content
                data={data}
                setDrawer={setDrawer}
                refresh={refresh}
                refreshlist={refreshlist}
              ></Content>
            </Spin>
          </div>

          <div style={{ color: colorText, paddingRight: 16, marginLeft: 16 }}>
            {allmsg?.data?.map((it, i) => {
              return (
                <ReplyCard
                  {...it}
                  key={i}
                  run={run}
                  loading={loading}
                  currentUser={currentUser}
                  curitem={curitem}
                  formRef={formRef}
                  setdoreply={setdoreply}
                  token={token}
                  scrollRef={scrollRef}
                />
              );
            })}
          </div>

        </Scrollbars>
      </div>

    </Drawer>
  );
}

export default Reply;
